<template>
<view>
	<view class="date-select-wrap" @click="showCalendar = true" :class="{'border-bottom': border}">
		<view style="display: flex;">
			<u-icon name="calendar-fill" size="18"></u-icon>
			<view class="date-input">
				<u-input :border="false" v-model="date" placeholder="" disabled disabledColor="#fff"></u-input>
			</view>
		</view>
		<u-icon :name="iconName" size="18"></u-icon>
	</view>
	<u-calendar maxDate="2099-12-31" :minDate="minDate" :show="showCalendar" @close="showCalendar = false" @confirm="dateChange"></u-calendar>
</view>
</template>

<script>
import moment from 'moment';

export default {
	model: {
	    prop: "value",
	    event: "input",
	  },
  props: {
    value: {
      type: String,
      default: '',
    },
    iconName: {
      type: String,
      default: 'arrow-right'
    },
    border: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      showCalendar: false,
      inputVal: '',
      os: 'android',
      minDate: '',
    };
  },
  computed: {
    date() {
      return this.value;
    },
  },
  mounted() {
    uni.getSystemInfo({
      success: (res) => {
        this.os = res.osName;
        if (this.os !== 'ios') {
          this.minDate = moment().format('YYYY-MM-DD');
        } else {
          this.minDate = moment().format('YYYY/MM/DD').replace(/\//g, '-');
        }
      },
    });
  },
  watch: {
    date(val) {
      this.inputVal = val;
    },
    inputVal(val) {
      this.$emit('input', val);
    },
  },
  methods: {
    dateChange(e) {
      if (this.os === 'ios') {
        e.result = e[0].replace(/-/g, '/');
      }
      this.inputVal = e[0];
	  this.showCalendar = false
    },
  },
};
</script>
<style lang="scss" scoped>
.date-select-wrap{
	display: flex;
	justify-content: space-between;
	.date-input{
		display: inline-block;
		margin-left: 30rpx;
	}
}
.border-bottom{
	border-bottom: 1px solid #E8E8E8;
}
</style>